<template>
  <div>
    <div id="columnChart" style="height: 700px; width: 800px; float: left"></div>
    <div id="pieChart" style="height: 700px; width: 800px; margin-left: auto"></div>
  </div>

</template>

<script>
// 票价和人数
import * as echarts from 'echarts'
import { findTicketsAndPeople } from '../../../http/request'
export default {
  name: 'ticketPassenger',
  data () {
    return {
      ticket: [],
      people: []
    }
  },
  mounted () {
    this.columnChart()
    this.pieChart()
    findTicketsAndPeople().then(res => {
      for (let r in res.data) {
        console.log(res.data[r])
        this.ticket.push(res.data[r].ticketMoney)
        this.people.push(res.data[r].people)
      }
      console.log(this.ticket),
      console.log(this.people),
      this.columnChart()
      this.pieChart()
    })
  },
  methods: {
    columnChart () {
      let columnChart = echarts.init(document.getElementById('columnChart'))
      columnChart.setOption({
        title: {
          text: '各票价人数数量和占比'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          name: '票价/¥',
          type: 'category',
          data: this.ticket
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.people,
          type: 'bar',
          barWidth: '40%',
          itemStyle: {
            color: '#5DC5E8'
          }
        }]
      })
    },
    pieChart () {
      let pieChart = echarts.init(document.getElementById('pieChart'))
      pieChart.setOption({
        title: {
          text: '各票价人数数量和占比',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} '
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: ' 票价',
            label: {
              formatter: '{a|{a}}{abg|}  {b|{b}/元：}{c}人 ',
              backgroundColor: '#F6F8FC',
              borderColor: '#8C8D8E',
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: '#6E7079',
                  // lineHeight: 22,
                  align: 'center'
                },
                b: {
                  color: '#4C5058',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 33
                }
              }
            },
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.people[0], name: this.ticket[0] },
              { value: this.people[1], name: this.ticket[1] },
              { value: this.people[2], name: this.ticket[2] },
              { value: this.people[3], name: this.ticket[3] },
              { value: this.people[4], name: this.ticket[4] },
              { value: this.people[5], name: this.ticket[5] },
              { value: this.people[6], name: this.ticket[6] },
              { value: this.people[7], name: this.ticket[7] },
              { value: this.people[8], name: this.ticket[8] },
              { value: this.people[9], name: this.ticket[9] },
              { value: this.people[10], name: this.ticket[10] },
              { value: this.people[11], name: this.ticket[11] },
              { value: this.people[12], name: this.ticket[12] },
              { value: this.people[13], name: this.ticket[13] }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped>

</style>
